<template>
  <div class="hot-container">
    <div id="hot">hot</div>
    <div class="next" @click="changeIndex(1)">»</div>
    <div class="pre" @click="changeIndex(-1)">«</div>
  </div>
</template>

<script>
import mixin from "../utils/mixin";
export default {
  mixins: [mixin],
  data() {
    return {
      index: 0,
      serieDatas: null,
    };
  },
  computed: {
    option() {
      return {
        title: {
          text: this.originData[this.index].name,
          top: this.baseSize,
          left: this.baseSize / 2,
          textStyle: {
            fontSize: this.baseSize,
          },
        },
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            name: this.originData[this.index].name,
            type: "pie",
            radius: "60%",
            data: this.serieDatas,
            label: {
              show: false,
            },
            emphasis: {
              label: {
                show: true,
              },
              labelLine: {
                show: false,
              },
            },
          },
        ],
        legend: {
          top: this.baseSize / 4,
          textStyle: {
            fontSize: this.baseSize / 2,
          },
          itemWidth: this.baseSize / 2,
          itemHeight: this.baseSize / 2,
          icon: "circle",
        },

        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      };
    },
  },
  mounted() {
    this.init("hot", "api/hot");
    this.renderChart();
  },
  methods: {
    dealData() {
      console.log(this.originData);
      this.serieDatas = this.originData[this.index].children.map((item) => {
        let temp = item.children
          .map((item) => {
            return item.name + ":" + item.value;
          })
          .join("<br />");
        return {
          name: item.name,
          value: item.value,
          tooltip: {
            formatter: "{a}: {b}<br />{c}: {d}%<br/>" + temp,
          },
        };
      });
    },
    changeIndex(p) {
      console.log(this.index, p);
      this.index = this.index + p;
      if (this.index >= this.originData.length) this.index = 0;
      if (this.index < 0) this.index = this.originData.length - 1;

      this.dealData();
      this.updateChart();
    },
  },
};
</script>

<style lang="less" scoped>
.hot-container {
  width: 100%;
  height: 100%;
  position: relative;
  #hot {
    width: 100%;
    height: 100%;
  }
  .pre {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 1000;
    // background: antiquewhite;
    color: antiquewhite;
    font-size: 20px;
    cursor: pointer;
  }
  .next {
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 1000;
    font-size: 20px;

    // background: antiquewhite;
    color: antiquewhite;
    cursor: pointer;
  }
}
</style>